<template>
  <div class>
    <!-- 搜索 -->
    <SxFilterSearch
      v-bind="sx_mark([name,'search'])"
      :form-fields="search.list"
      :select-options-list="selectOptionsList"
      @search="handleSearch"
      @reset="handleResetSearch"
    />
    <!-- 表格 -->
    <SxTable
      row-id="_XID"
      v-bind="sx_mark([name,'table'])"
      :button-list="buttonGroup"
      :highlight-current-row="false"
      :height="config.height"
      :tool-width="200"
      :tool-permission="toolPermission"
      :columns="config.tableData.columns"
      :table-params="search.params"
      :request-method="actTaskControllertasksList"
      :loading="config.loading"
      tool-fixed="right"
      :selection-type="selectType"
      :checkbox-config="{ reserve: selectType ? true : false }"
    >
      <template v-slot:tool="scope">
        <div class="tool_handle">
          <el-button
            plain
            :size="$store.getters.size"
            class="scale_9"
            type="primary"
            @click="handleEdit(scope)"
          >查看审批</el-button>
        </div>
      </template>
    </SxTable>
    <SxDialog
      :title="VFormRender.title"
      :width="VFormRender.width"
      :min-height="VFormRender.height"
      :visible="VFormRender.visible"
      :disabledButton="true"
    >
      <div class="VFormRender" v-if="VFormRender.visible">
        <VFormRender
          v-bind="sx_mark([name,'VFormRender'])"
          :form-json="VFormRender.formJson"
          :form-data="VFormRender.formData"
          :preview-state="true"
          :option-data="VFormRender.optionData"
        ></VFormRender>
        <div class="BpmnProcess">
          <BpmnProcess v-bind="sx_mark([name,'BpmnProcess'])"></BpmnProcess>
        </div>
        <div slot="footer" class="footer">
          <slot name="footer">
            <el-button :size="$store.getters.size" type="primary" @click="handleAddConfirm">同意</el-button>
            <el-button :size="$store.getters.size" type="warning" @click="handleAddReject">拒绝</el-button>
            <el-button :size="$store.getters.size" @click="handleAddCancel">取消</el-button>
          </slot>
        </div>
      </div>
    </SxDialog>
  </div>
</template>

<script>
import {
  actTaskControllertasks,
  actgetDefinitions,
  actreadResource,
  actTaskControllercompleteTask,
  actTaskControllergetHistoryTask
} from "@/api/api";
import SxTable from "@Components/Table";
import VFormRender from "@Form/components/form-render/index";
import BpmnProcess from "@Components/BpmnProcess/index";
import { GetXMLNodeProperty } from "@/utils";
import SxDialog from "@Components/Dialog";
import SxTabs from "@Components/Tabs";
import SxFilterSearch from "@Components/Search";
import SxButtonGroup from "@Components/ButtonGroup";
import SxForm from "@Components/Form";
import config from "./config.js";
import throttleResize from "@Components/assets/js/utils/throttleResize";
export default {
  props: {
    height: {
      type: String,
      default: null
    },
    // 单选还是多选 radio checkbox
    selectType: {
      type: String,
      default: "checkbox"
    }
  },
  mixins: [throttleResize],
  components: {
    SxFilterSearch,
    SxTable,
    SxDialog,
    SxTabs,
    SxForm,
    VFormRender,
    SxButtonGroup,
    BpmnProcess
  },
  data() {
    return {
      ...config.call(this)
    };
  },
  methods: {
    async actTaskControllertasksList(params) {
      let res = await actTaskControllertasks(params);
      if (this.actgetDefinitionsList.length == 0) {
        let { data } = await actgetDefinitions();
        this.actgetDefinitionsList = data;
      }
      res.data = res.data.map(item => {
        return {
          ...item,
          ...this.actgetDefinitionsList.filter(i => item.id == i.key)[0]
        };
      });
      return res;
    },
    // 搜索事件
    handleSearch(data) {
      this.search.params = { ...this.search.params, ...data };
      this.$refs[`${this.name}_table`].refreshTable();
    },
    // 重置搜索
    handleResetSearch(data) {
      this.$refs[`${this.name}_table`]._clearFilter();
      this.handleSearch(data);
    },
    // 关闭弹窗
    handleAddCancel() {
      this.VFormRender.visible = false;
      this.VFormRender.formData = {};
    },
    // 查看审批
    async handleEdit(scope) {
      let res = await actreadResource({
        pdid: scope.row.deploymentId,
        resourceName: scope.row.resourceName
      });
      let taskRes = await actTaskControllergetHistoryTask({
        id: scope.row.taskId
      });
      this.VFormRender.title = name || "新增";
      this.VFormRender.visible = true;
      this.VFormRender.formJson = {
        formConfig: {
          cssCode: "",
          customClass: "",
          functions: "",
          labelAlign: "label-left-align",
          labelPosition: "left",
          labelWidth: 80,
          layoutType: "PC",
          modelName: "formData",
          onFormCreated: "",
          onFormDataChange: "",
          onFormMounted: "",
          refName: "vForm",
          rulesName: "rules",
          size: ""
        },
        widgetList: GetXMLNodeProperty(res)
      };
      this.bpmnRow = scope.row;
      let formData = {};
      scope.row.formData.forEach(item => {
        formData[item.label] = item.value;
      });
      this.VFormRender.formData = formData;
      this.$nextTick(() => {
        this.$refs[`${this.name}_BpmnProcess`].users = taskRes.data.map(
          item => {
            return {
              name: item.name,
              color: "#409eff",
              assignee: [{ name: item.assignee }]
            };
          }
        );
      });
    },
    async handleAddConfirm() {
      const confirm = await this.$confirm("是否同意该审批", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(() => {});
      if (!confirm) return;
      let { msg } = await actTaskControllercompleteTask({
        id: this.bpmnRow.taskId
      });
      this.$showMessage({ type: "success", message: msg });
      this.handleAddCancel();
      this.$refs[`${this.name}_table`].refreshTable();
    },
    async handleAddReject() {
      const confirm = await this.$confirm("是否拒绝该审批", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(() => {});
      if (!confirm) return;
    }
  }
};
</script>

<style scoped lang="scss">
.VFormRender {
  width: 95%;
  padding: 2.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.BpmnProcess {
  flex: 1;
  display: flex;
  align-items: flex-end;
  position: sticky;
  bottom: 0;
}
.footer {
  display: flex;
  justify-content: flex-end;
  button {
    &:last-child {
      margin-left: 10px;
    }
  }
}
</style>
